<!DOCTYPE html>
<html lang="ch">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>智能仓库管理系统</title>

  <style>
    body {
      background-color: #112130;
    }

    div {
      margin: 0 auto;
      width: 100%;
      display: block;
      border: 1pt;
      border-style: groove;
      margin-bottom: 3pt;
      color: cadetblue;
    }

    li {
      list-style: none;
      margin-left: -30pt;
    }

    .showtimespan p {
      text-align: center;
      height: 1px;
    }

    /* Switch开关样式 */
    input[type='checkbox'].switch {
      outline: none;
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      position: relative;
      width: 40px;
      height: 20px;
      background: #ccc;
      border-radius: 10px;
      transition: border-color .3s, background-color .3s;
    }

    input[type='checkbox'].switch::after {
      content: '';
      display: inline-block;
      width: 1rem;
      height: 1rem;
      border-radius: 50%;
      background: #fff;
      box-shadow: 0, 0, 2px, #999;
      transition: .4s;
      top: 2px;
      position: absolute;
      left: 2px;
    }

    input[type='checkbox'].switch:checked {
      background: rgb(19, 206, 102);
    }

    input[type='checkbox'].switch:checked::after {
      content: '';
      position: absolute;
      left: 55%;
      top: 2px;
    }
  </style>

  <script>
    function setTime() {
      var t = new Date();
      var sendStr;
      var obj;
      obj = {
        "current time": Math.floor((t.getTime() - (t.getTimezoneOffset() * 60000)) / 1000)
      }
      sendStr = JSON.stringify(obj);
      var xmlhttp;
      if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
      } else {
        xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
      }
      xmlhttp.open('GET', 'updateTime?data=' + sendStr, true);
      xmlhttp.send();
    }

    function toggleSwitch(arg) {
      var xmlhttp;
      var sendStr;
      if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
      } else {
        xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
      }
      var e = document.getElementById("switch" + arg);
      var obj;
      obj = {
        "num": arg,
        "value": e.checked ? 1 : 0
      }
      sendStr = JSON.stringify(obj);
      // console.log("touch " + arg + " val: " + e.checked);
      console.log("Str:" + sendStr);
      xmlhttp.open('GET', 'controlOutput?data=' + sendStr, true);
      xmlhttp.send();
    }

    function closeDebugMode() {
      var xmlhttp;
      var sendStr;
      if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
      } else {
        xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
      }
      var obj;
      obj = {
        "debugMode": "close",
      }
      sendStr = JSON.stringify(obj);
      console.log("Str:" + sendStr);
      xmlhttp.open('GET', 'closeDebugMode?data=' + sendStr, true);
      xmlhttp.send();
    }

    function changeThreshold() {
      var xmlhttp;
      var sendStr;
      if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
      } else {
        xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
      }
      var obj;
      obj = {
        "temperature": {
          "low": parseFloat(document.getElementById("temper_low").value),
          "high": parseFloat(document.getElementById("temper_high").value),
        },
        "humidity": {
          "low": parseFloat(document.getElementById("humidity_low").value),
          "high": parseFloat(document.getElementById("humidity_high").value),
        }
      }
      sendStr = JSON.stringify(obj);
      console.log("Str " + sendStr);
      xmlhttp.open('GET', 'changeThreshold?data=' + sendStr, true);
      xmlhttp.send();
    }

    function getMcuStatus() {
      var xmlhttp;
      console.log('get MCU Time log');
      if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
      } else {
        xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
      }
      xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
          var retStr = xmlhttp.responseText;
          var obj = JSON.parse(retStr);
          // console.log(retStr);
          document.getElementById('WareHouse').innerHTML = obj["status"]["warehouse"];
          document.getElementById('switch1').checked = obj["status"]["aitFanCtrl"];
          document.getElementById("switch2").checked = obj["status"]["motorCtrl"];
          document.getElementById("switch3").checked = obj["status"]["beepCtrl"];
          document.getElementById("show_temper_low").innerHTML = parseFloat(obj["status"]["THR"]["temperature"]["low"]).toFixed(1).toString();
          document.getElementById("show_temper_high").innerHTML = parseFloat(obj["status"]["THR"]["temperature"]["high"]).toFixed(1).toString();
          document.getElementById("show_humidity_low").innerHTML = parseFloat(obj["status"]["THR"]["humidity"]["low"]).toFixed(1).toString();
          document.getElementById("show_humidity_high").innerHTML = parseFloat(obj["status"]["THR"]["humidity"]["high"]).toFixed(1).toString();
        }
      },
        xmlhttp.open('GET', 'getMcuStatus', true);
      xmlhttp.send();
    }

    function WindowOnload() {
      setInterval('getMcuStatus()', 888);
    }
  </script>
</head>

<body onload="WindowOnload()">
  <div>
    <h1 align="center">智能仓库管理系统</h1>
  </div>
  <div style="padding-bottom: 20pt;">
    <span style='font-size: 28px;' class="showtimespan" id='WareHouse'>
    </span>
  </div>
  <div>
    <table style="width: 40%;">
      <tr>
        <td>风扇:</td>
        <td><input type="checkbox" class="switch" id="switch1" onclick="toggleSwitch(1)"></td>
      </tr>
      <tr>
        <td>电机:</td>
        <td><input type="checkbox" class="switch" id="switch2" onclick="toggleSwitch(2)"></td>
      </tr>
      <tr>
        <td>蜂鸣器:</td>
        <td><input type="checkbox" class="switch" id="switch3" onclick="toggleSwitch(3)"></td>
      </tr>
      <tr>
        <td>照明灯:</td>
        <td><input type="checkbox" class="switch" id="switch4" onclick="toggleSwitch(4)"></td>
      </tr>
    </table>
    <button onclick="closeDebugMode(5)">关闭调试模式</button>
  </div>

  <div>
    <table>
      <tr>
        <th></th>
        <th>下限</th>
        <th>上限</th>
      </tr>
      <tr>
        <td>温度</td>
        <td><span id="show_temper_low">20</span></td>
        <td><span id="show_temper_high">30</span></td>
      </tr>
      <tr>
        <td>湿度</td>
        <td><span id="show_humidity_low">60</span>
        </td>
        <td><span id="show_humidity_high">80</span>
        </td>
      </tr>
    </table>
  </div>
  <div>
    <table width: 400;>
      <tr>
        <th></th>
        <th>下限</th>
        <th>上限</th>
      </tr>
      <tr>
        <td>温度</td>
        <td><input value="20.0" min="-100" max="200" step="0.1" type="number" name="temper_low" id="temper_low"
            width="10pt"></td>
        <td><input value="30.0" min="-100" max="200" step="0.1" type="number" name="temper_high" id="temper_high"
            width="10pt"></td>
      </tr>
      <tr>
        <td>湿度</td>
        <td><input value="60.0" min="-100" max="200" step="0.1" type="number" name="humidity_low" id="humidity_low"
            width="10pt">
        </td>
        <td><input value="80.0" min="-100" max="200" step="0.1" type="number" name="humidity_high" id="humidity_high"
            width="10pt">
        </td>
      </tr>
    </table>
    <button onclick="changeThreshold()">提交</button>
  </div>
</body>

</html>